<template >
  <div class="colorRootview">
    <!-- 标题栏 -->
    <van-nav-bar class="transparent-bar" id="nav" @click-left="onBackClick" :border="false">
      <font
        color="#477CEC"
        style="font-size:28px;font-weight:400;letter-spacing:1px;"
        slot="title"
      >盘库</font>
      <van-icon name="arrow-left" color="black" :size="30" slot="left" />
    </van-nav-bar>
    <div class="divider"></div>

    <div class="nameTitleBg">
      <div class="titleIcon"></div>
      <van-cell
        style="padding:0;margin:0"
        value-class="nameTitleText"
        value="盘库计划"
        :border="false"
      />
    </div>
    <van-cell-group class="detailCard" :border="false">
      <!-- <van-cell
        title="计划名称"
        :value="name"
        value-class="cellValue"
        title-class="cellTitle"
        :border="false"
      />-->
      <van-cell :value="'计划名称: '+name" value-class="cellValue" :border="false" />
      <div class="divider"></div>
      <van-cell :value="'开始时间: '+startDateFormated" value-class="cellValue" :border="false" />
      <div class="divider"></div>
      <van-cell :value="'结束时间: '+endDateFormated" value-class="cellValue" :border="false" />
    </van-cell-group>
    <div class="footer">
      <div class="scanDiv" v-if="state<3&&state>0">
        <van-button class="scanBtn" round type="default" @click="scan">扫</van-button>
      </div>
      <div class="startPlanDiv" v-if="state==0">
        <van-button class="startPlanButton" round type="default" @click="startPlan">开启计划</van-button>
      </div>
    </div>

    <van-dialog
      v-model="checkCodeDialogShow"
      title="物料信息"
      show-confirm-button
      @confirm="confirmCodeScan"
    >
      <van-cell
        :border="false"
        title="物料名称"
        :value="codeCheckResult.materielName"
        title-class="cellTitle-dialog"
        value-class="cellValue-dialog"
      />
      <van-cell
        :border="false"
        title="物料编码"
        :value="codeCheckResult.materielCode"
        title-class="cellTitle-dialog"
        value-class="cellValue-dialog"
      />
      <van-cell
        :border="false"
        title="批号"
        :value="codeCheckResult.batchCode"
        title-class="cellTitle-dialog"
        value-class="cellValue-dialog"
      />
      <van-cell
        :border="false"
        title="存储位置"
        :value="codeCheckResult.shelveName"
        title-class="cellTitle-dialog"
        value-class="cellValue-dialog"
      />
      <van-cell
        :border="false"
        title="有效期至"
        :value="expirationDateFormated"
        title-class="cellTitle-dialog"
        value-class="cellValue-dialog"
      />
      <van-cell
        :border="false"
        title="条形码"
        :value="codeCheckResult.barCode"
        title-class="cellTitle-dialog"
        value-class="cellValue-dialog"
      />
    </van-dialog>
  </div>
</template>

<script>
import http from "@/utils/request";
import api from "@/utils/api";
import { Dialog, Divider } from "vant";
import Toast from "@/utils/toast";
import dateFormat from "dateformat";
export default {
  name: "OutOfStorage",
  data() {
    return {
      checkCodeDialogShow: false,
      id: "", //计划ID
      name: "",
      startDate: "",
      endDate: "",
      state: 0,
      scanedBarCode: [], //扫过的条形码
      codeCheckResult: {
        materielName: "",
        materielCode: "",
        batchCode: "",
        shelveName: "",
        expirationDate: "",
        barCode: ""
      }
    };
  },
  methods: {
    startPlan() {
      let params = { planId: this.id };
      http
        .fetchGet(api.enablePlan, params, "正在请求...")
        .then(data => {
          Toast.success("计划启动成功");
          this.state = 1;
        })
        .catch(err => {});
    },
    onBackClick() {
      // this.barCodeScanInventory("20190821000041");
      this.$router.push({ path: "/main", query: { active: "inventory" } });
    },
    //判断是否可以盘库
    checkAvaible() {
      let now = new Date();
      let start = new Date(this.startDate + "+0800");
      if (this.state == 0 || now.getTime() < start.getTime()) {
        Toast.toast("盘库还未开始！", false);
        return false;
      }
      let end = new Date(this.endDate);
      if (now.getTime() > end.getTime()) {
        Toast.toast("盘库已经结束！", false);
        return false;
      }
      if (this.state === 3) {
        Toast.toast("已审核通过，无法扫码", false);
        return false;
      }
      if (this.state === 4) {
        Toast.toast("已作废，无法扫码", false);
        return false;
      }
      return true;
    },
    //点击扫码时判断是否可以盘库
    scan() {
      // this.barCodeScanInventory("20190821000041");
      if (this.checkAvaible()) {
        android.scan();
        console.log("scanClick");
      }
    },
    confirmCodeScan() {},
    barCodeScanInventory(code) {
      //点击设备物理扫码按钮时判断是否可以盘库
      if (!this.checkAvaible()) {
        return;
      }
      let isDuplicate = false;
      for (var i = 0; i < this.scanedBarCode.length; i++) {
        if (this.scanedBarCode[i] == code) {
          isDuplicate = true;
          break;
        }
      }
      if (isDuplicate) {
        Toast.toast("重复的条形码", false);
      } else {
        this.checkScan(code);
      }
    },
    //第一次扫码，不知道物料ID，传0，此时会返回物料ID，然后进入这个物料的批次列表页面，对这个物料进行盘库
    checkScan(code) {
      let params = { planId: this.id, code: code, materialId: 0 };
      http
        .fetchPost(api.checkStockCheck, params, "正在请求...")
        .then(data => {
          // this.scanedBarCode.push(code);
          // this.checkCodeDialogShow = true;
          this.codeCheckResult = data;
          if (data) {
            this.showBatchInventory(this.id, data.materielId, code);
          } else {
            // Toast.fail("没有此条形码的信息");
          }
        })
        .catch(err => {});
    },
    // getBatchInfo() {
    //   let params = {
    //     planId: this.id,
    //     code: this.codeCheckResult.barCode,
    //     materialId: this.codeCheckResult.materielId
    //   };
    //   http
    //     .fetchGet(api.getCheckInfo, params, "正在验证...")
    //     .then(data => {
    //       if (data) {
    //         data.planId = this.id;
    //         showBatchInventory(data);
    //         console.log(data);
    //       } else {
    //         Toast.fail("没有此条形码的信息");
    //       }
    //     })
    //     .catch(err => {});
    // },
    showBatchInventory(planId, materialId, barCode) {
      this.$router.push({
        path: "/batchInventory",
        query: {
          planId: planId,
          materialId: materialId,
          barCode: barCode,
          planName: this.name,
          startDate: this.startDate,
          endDate: this.endDate,
          state: this.state
        }
      });
    }
  },
  computed: {
    startDateFormated() {
      return dateFormat(this.startDate + "+0800", "isoDate");
    },
    endDateFormated() {
      return dateFormat(this.endDate + "+0800", "isoDate");
    },
    expirationDateFormated() {
      if (this.codeCheckResult.expirationDate) {
        return dateFormat(
          this.codeCheckResult.expirationDate + "+0800",
          "isoDate"
        );
      }
    }
  },
  created() {
    this.id = this.$route.query.id;
    this.name = this.$route.query.name;
    this.startDate = this.$route.query.startDate;
    this.endDate = this.$route.query.endDate;
    this.state = this.$route.query.state;

    window.barCodeScanInventory = this.barCodeScanInventory;
  },
  beforeDestroy() {
    window.barCodeScanInventory = null;
  }
};
</script>
<style lang="scss" scoped>
// .van-nav-bar,
// .van-tabbar {
//   height: 68px;
//   justify-content: center;
// }
// .van-nav-bar__title {
//   margin: auto;
// }
body {
  overflow: hidden;
  position: fixed;
  left: 0;
  top: 0;
}
.divider {
  height: 1px;
  width: 100%;
  background-color: #e6e6e6;
}
.transparent-bar {
  border: false;
  background-color: white;
}
.nameTitleBg {
  padding-left: 25px;
  padding-right: 25px;
  padding-top: 10px;
  padding-bottom: 10px;
  width: 100%;
  display: flex;
  flex-direction: row;
  background-color: white;
}
.nameTitleText {
  font-size: 24px;
  font-family: PingFangSC-Regular;
  font-weight: 400;
  color: rgba(51, 51, 51, 1);
  line-height: 33px;
  letter-spacing: 1px;
}
.titleIcon {
  margin: auto;
  margin-right: 16px;
  width: 6px;
  height: 24px;
  background: linear-gradient(
    360deg,
    rgba(125, 179, 247, 1) 0%,
    rgba(71, 124, 236, 1) 100%
  );
}
.colorRootview {
  // height: 100vh;
  // background-color: #f4f5f6;
  display: flex;
  flex-direction: column;
  background-color: #f4f5f6;
  height: 100%;
}
// .flex-container {
//   display: flex;
//   flex-direction: column;
//   height: 100%;
// }
.detailCard {
  /* border: 1px solid #cccccc;
  border-radius: 5px;
  box-shadow: 2px 4px 10px #aaaaaa; */
  padding: 5px;
  background-color: white;
  width: auto;
  margin-top: 15px;
}

.van-cell__title {
  width: 40%;
  flex: none;
}

.cellTitle {
  text-align: left;
  color: white;
}

.cellTitle-dialog {
  width: 30%;
  text-align: left;
}
.cellValue-dialog {
  width: 70%;
  text-align: left;
  margin-right: 10px;
}

.cellValue {
  text-align: left;
  // color: white;
  // background: #555cd1;
  // padding-left: 5px;
  // padding-right: 5px;

  font-size: 24px;
  font-family: PingFangSC-Regular;
  font-weight: 400;
  color: rgba(85, 85, 85, 1);
  line-height: 33px;
  letter-spacing: 1px;
}

.van-cell {
  margin: 5px;
  padding: 5px 5px 5px 5px;
  background: transparent;
}
.roundButton {
  /* width: 100%;
  margin: 10px;
  height: 40px;
  border-radius: 20px;
  border-style: none;
  background-color: white;
  color: #704ae0; */
  width: 90%;
  margin: 10px;
  color: #704ae0;
}
.startPlanDiv {
  width: 344px;
  height: 128px;
  background: rgba(222, 233, 255, 1);
  border-radius: 64px;
  display: flex;
  justify-content: center;
  align-items: center;
  margin: 0 auto;
}
.startPlanButton {
  // width: 90%;
  // margin: 10px;
  // color: white;

  width: 318px;
  height: 102px;
  background: rgba(71, 124, 236, 1);
  border-radius: 51px;
  border-width: 0;
  font-size: 42px;
  font-family: PingFangSC-Regular;
  font-weight: 400;
  color: rgba(255, 255, 255, 1);
  line-height: 59px;
  letter-spacing: 2px;
}
.split {
  height: 1px;
  width: 100%;
  background-color: white;
  margin: auto;
}
.footer {
  // position: fixed;
  // bottom: 0px;
  // width: 100%;

  width: 100%;
  height: auto;
  margin: auto;
}
.scanBtn {
  width: 102px;
  height: 102px;
  color: white;
  background-color: #477cec;
  // margin: auto;
  // margin-bottom: 10px;

  font-size: 42px;
  font-family: PingFangSC-Regular;
  font-weight: 400;
  color: rgba(255, 255, 255, 1);
  line-height: 59px;
  letter-spacing: 2px;
}
.scanDiv {
  width: 128px;
  height: 128px;
  background: rgba(222, 233, 255, 1);
  border-radius: 50%;
  display: flex;
  justify-content: center;
  align-items: center;
  margin: 0 auto;
}
</style>